<template>
	<view class="tui-userinfo-box container">
		<tui-list-cell padding="0" :arrow="true" @click="changeAvatar">
			<view class="tui-list-cell">
				<view>头像</view>
				<image v-if="userInfo && userInfo.avatar" :src="info.app.cdnurl+userInfo.avatar" class="tui-avatar">
				</image>
			</view>
		</tui-list-cell>
		<tui-list-cell padding="0" :hover="false" @click="nickname(1,userInfo.username)">
			<view class="tui-list-cell tui-pr30">
				<view>用户名</view>
				<view class="tui-content">{{userInfo.username}}</view>
			</view>
		</tui-list-cell>
		<tui-list-cell padding="0" :arrow="true" @click="nickname(2,userInfo.nickname)">
			<view class="tui-list-cell">
				<view>昵称</view>
				<view class="tui-content">{{userInfo.nickname}}</view>
			</view>
		</tui-list-cell>

		<picker mode="selector" :range="array" @change="genderClick" :value="userInfo.gender">
			<tui-list-cell padding="0" :arrow="true" unlined>
				<view class="tui-list-cell">
					<view>性别</view>
					<view class="tui-content">{{array[userInfo.gender]}}</view>
				</view>
			</tui-list-cell>
		</picker>
		<tui-list-cell padding="0" :arrow="true" @click="copy(userInfo.invite_code)">
			<view class="tui-list-cell">
				<view>邀请码</view>
				<view class="tui-content">{{userInfo.invite_code}}</view>
			</view>
		</tui-list-cell>
		<tui-list-cell padding="0" :arrow="true" @click="address">
			<view class="tui-list-cell">
				<view>地址管理</view>
				<view class="tui-content">查看</view>
			</view>
		</tui-list-cell>
		<tui-list-cell padding="0" :arrow="true" @click="auth">
			<view class="tui-list-cell">
				<view>实名信息</view>
				<view class="tui-content">查看</view>
			</view>
		</tui-list-cell>
		<tui-list-cell padding="0" :arrow="true" @click="code">
			<view class="tui-list-cell">
				<view>我的二维码</view>
				<view class="tui-content">查看</view>
			</view>
		</tui-list-cell>
		<tui-list-cell padding="0">
			<view class="tui-list-cell">
				<view style="display: flex;align-items: center;">
					<image src="https://www.taoding1688.com/assets/addons/shop/uniapp/platform/WechatMiniProgram.png"
						mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
					<view class="">微信小程序</view>
				</view>
				<view class="tui-content" @click="wechatBind"
					v-if="userInfo.third_oauth && userInfo.third_oauth.length==0">绑定</view>
				<view class="tui-content" @click="wechatUnbind" v-else>解绑</view>
			</view>
		</tui-list-cell>
	
	</view>
</template>

<script>
	import {
		getToken
	} from "@/util/auth"
	import {
		getUserUpdate,
		getUserProfile,
		postWechatBind,
		postWechatUnbind
	} from "@/apis/index"

	export default {
		data() {
			return {
				sex: '男',
				date: '请选择',
				userInfo: {},
				array: ['女', '男', '保密'],
				index: null,
			}
		},
		onLoad(option) {

		},
		onShow() {
			getUserProfile().then(res => {
				// this && this.$tn.vuex('userInfos', res.data)
				this.userInfo = res.data
				this && this.$tn.vuex('userInfos', res.data)
			})
		},
		methods: {
			code(){
				uni.navigateTo({
					url:'/discountPage/code/code'
				})
			},
		
			auth() {
				uni.navigateTo({
					url: '/discountPage/authentication/authentication'
				})
			},
			address() {
				uni.navigateTo({
					url: '/discountPage/address/address'
				})
			},
			wechatBind() {
				let _this = this
				postWechatBind().then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					getUserProfile().then(res => {
						_this.userInfo = res.data
						_this && _this.$tn.vuex('userInfos', res.data)
					})
				})
			},
			wechatUnbind() {
				let _this = this
				postWechatUnbind({
					platform: 'miniProgram'
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					getUserProfile().then(res => {
						_this.userInfo = res.data
						_this && _this.$tn.vuex('userInfos', res.data)
					})
				})
			},
			copy(item) {
				uni.setClipboardData({
					data: item,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					},
					fail: function() {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						})
					},
				});
			},
			getValue(selectedSchedule) {
				console.log(selectedSchedule, 'selectedSchedule')
				if (selectedSchedule.index == "1") {
					this.userInfo.username = selectedSchedule.name
					return
				}
				if (selectedSchedule.index == "2") {
					this.userInfo.nickname = selectedSchedule.name
					this.danger()
					return
				}
			},
			changeAvatar() {
				let _that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						const tempFilePaths = res.tempFilePaths[0];
						// this.tui.href('/pages/my/cropper/cropper?src=' + tempFilePaths);

						uni.uploadFile({
							url: 'https://www.taoding1688.com/api/common/upload',
							filePath: tempFilePaths,
							name: 'file',
							formData: {
								'group': 'ugc', // 其他要传的参数
								'token': getToken()
							},
							success: uploadFileRes => {
								let info = JSON.parse(uploadFileRes.data)
								this.userInfo.avatar = info.data.url
								this.danger()
								// 处理上传成功的结果
							},
							fail: uploadFileError => {
								// 处理上传失败的错误
							}
						});
					}
				});
			},
			nickname(index, nickname) {
				// this.tui.href("/pages/my/nickname/nickname")
				uni.navigateTo({
					url: `/templatePage/nickname/nickname?index=${index}&name=${nickname}`
				})
			},
			changeDate(e) {
				this.date = e.detail.value
			},
			confirm: function(e) {
				this.index = e[0]
			},
			genderClick(e) {
				console.log(e, 'e')
				this.userInfo.gender = e.detail.value
				this.danger()
			},
			danger() {
				let _this = this
				getUserUpdate(this.userInfo).then(res => {
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
					getUserProfile().then(res => {
						_this.userInfo = res.data
						_this && _this.$tn.vuex('userInfos', res.data)
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tui-btn-box {
		padding: 40rpx 30rpx 10rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-userinfo-box {
		margin: 20rpx 0;
		color: #333;
	}

	.tui-list-cell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 60rpx 24rpx 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;
	}

	.tui-pr30 {
		padding-right: 30rpx;
	}

	.tui-avatar {
		width: 100rpx;
		height: 100rpx;
		display: block;
	}

	.tui-content {
		font-size: 26rpx;
		color: #666;
	}
</style>